<template>
  <div class="header-cotainer">
    <div class="navigation-bar">
      <div class="navigation-shop-name">
        <router-link to="/home">LCZW商城</router-link>
      </div>
      <div class="navigation-item-group">
        <div class="navigation-item-user">
          <!-- Vuex中的isLogin为true显示这一部分 -->
          <el-dropdown
            class="navigation-item"
            v-if="$store.state.isLogin"
            @command="handleCommand"
          >
            <router-link to="/user">
              <el-button type="text">
                {{ $store.state.username }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </router-link>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/user">
                <el-dropdown-item> 个人中心 </el-dropdown-item>
              </router-link>
              <router-link to="/user/orderList">
                <el-dropdown-item>我的订单</el-dropdown-item>
              </router-link>
              <router-link to="/user/comment">
                <el-dropdown-item>评价晒单</el-dropdown-item>
              </router-link>
              <router-link to="/user/favorite">
                <el-dropdown-item>我的收藏</el-dropdown-item>
              </router-link>
              <el-dropdown-item command="logout"> 退出账户 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!-- Vuex中的isLogin为false显示这一部分 -->
          <el-button
            v-if="!$store.state.isLogin"
            class="navigation-item"
            type="text"
            @click="dialogLoginVisible = true"
            >登录</el-button
          >
          <span v-if="!$store.state.isLogin" class="sep">|</span>
          <el-button
            v-if="!$store.state.isLogin"
            class="navigation-item"
            type="text"
            @click="dialogRegisterVisible = true"
            >注册</el-button
          >
        </div>

        <!-- 首页购物车按钮 -->
        <div class="navigation-item-shopcart">
          <el-popover
            ref="shopcart"
            placement="bottom"
            title="购物车"
            width="300"
            trigger="hover"
          >
            <div class="cart-items" v-if="$store.state.cartCount != 0">
              <el-scrollbar class="cart-items-scrollbar">
                <div
                  class="items-list"
                  v-for="(item, index) in $store.state.cartItems"
                  :key="index"
                >
                  <div class="figure">
                    <img
                      :src="item.itemSwiperImgUrl[0].url"
                      width="80"
                      height="80"
                    />
                  </div>
                  <p class="name">{{ item.title }}</p>
                  <p class="price">
                    {{ item.discountPrice }}元 × {{ item.count }}
                  </p>
                </div>
              </el-scrollbar>
              <div class="cart-bill-detail">
                <p class="total-price">
                  <span>共{{ $store.state.cartCount }}件商品</span>
                  {{ $store.getters.cartItemsTotalPrice }}元
                </p>
                <el-button type="primary" plain @click="routerTo('/cart')">
                  去购物车结算
                </el-button>
              </div>
            </div>
            <el-empty description="购物车空空如也" v-else></el-empty>
          </el-popover>

          <el-badge
            :value="$store.state.cartCount"
            :max="30"
            class="item"
            :hidden="$store.state.cartCount == 0"
          >
            <el-button
              class="navigation-shopcart"
              v-popover:shopcart
              @click="routerTo('/cart')"
            >
              <img src="@/assets/img/shopcart.svg" alt="" />
            </el-button>
          </el-badge>
        </div>

        <!-- 登录弹窗 -->
        <el-dialog
          title="登录"
          :visible.sync="dialogLoginVisible"
          width="30%"
          center
        >
          <el-button type="text" disabled>登录</el-button>
          <el-button
            type="text"
            @click="
              (dialogLoginVisible = false), (dialogRegisterVisible = true)
            "
            >注册</el-button
          >
          <el-form :model="form">
            <el-form-item>
              <el-input
                v-model="form.name"
                autocomplete="off"
                placeholder="用户名/邮箱/手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.password"
                autocomplete="off"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogLoginVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="(dialogLoginVisible = false), handleLogin()"
            >
              登 录
            </el-button>
          </div>
        </el-dialog>

        <!-- 注册弹窗 -->
        <el-dialog
          title="注册"
          :visible.sync="dialogRegisterVisible"
          width="30%"
          center
        >
          <el-button
            type="text"
            @click="
              (dialogRegisterVisible = false), (dialogLoginVisible = true)
            "
            >登录</el-button
          >
          <el-button type="text" disabled>注册</el-button>
          <el-form :model="form">
            <el-form-item>
              <el-input
                v-model="form.name"
                autocomplete="off"
                placeholder="用户名/邮箱/手机号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.password"
                autocomplete="off"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.confirmPassword"
                autocomplete="off"
                placeholder="请确认密码"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogRegisterVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="(dialogRegisterVisible = false), handleRegister()"
            >
              注 册
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="header">
      <div class="site-header">
        <div class="header-logo">
          <router-link to="/home">
            <img class="header-logo-img" src="@/assets/sitelogo.svg" alt="" />
          </router-link>
        </div>
        <div class="header-search-group">
          <el-autocomplete
            class="header-input"
            v-model="state"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          ></el-autocomplete>
          <el-button class="header-button" icon="el-icon-search"></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SiteHeader",
  data() {
    return {
      dialogLoginVisible: false,
      dialogRegisterVisible: false,
      form: {
        name: "",
        password: "",
        confirmPassword: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },

      searchInput: "",
      recommendWords: [],
      state: "",
    };
  },
  methods: {
    handleLogin() {
      this.$store.commit("changeLoginStatus");
    },
    handleRegister() {
      console.log("handleRegister");
    },
    handleCommand(command) {
      if (command === "logout") {
        this.$store.commit("changeLoginStatus");
      }
    },

    routerTo(url) {
      this.$router.push(url).catch((err) => err);
    },

    querySearch(queryString, cb) {
      var recommendWords = this.recommendWords;
      var results = queryString
        ? recommendWords.filter(this.createFilter(queryString))
        : recommendWords;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (recommendWord) => {
        return (
          recommendWord.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    loadAll() {
      return [
        { value: "Xiaomi 11 青春活力版" },
        { value: "小米平板5" },
        { value: "米家波轮洗衣机尊享版" },
        { value: "米家防缠绕扫拖机器人" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
  },
  mounted() {
    this.recommendWords = this.loadAll();
  },
};
</script>

<style scoped>
.header-cotainer {
  background-color: #333333;
}

.navigation-bar {
  background-color: #333333;
  width: 1250px;
  height: 49px;
  margin: 0 auto;
  display: flex;
}
.navigation-shop-name {
  flex: 5;
  display: flex;
  align-items: center;
}
.navigation-shop-name a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.navigation-item-group {
  flex: 1;
  display: flex;
}
.navigation-item-user {
  flex: 2;
  display: flex;
}
.navigation-item-user .sep {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  margin: 0 5px;
}
.navigation-item .el-button--text {
  color: #fff;
}
.navigation-item .el-button--text:hover {
  color: #409eff;
}
.navigation-item-shopcart {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation-shopcart {
  height: 30px;
  width: 50px;
  display: flex;
  background-color: #333333;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 0;
  border: none;
  border-radius: 0;
}
.navigation-shopcart img {
  margin: 0 5px;
  width: 24px;
  height: 24px;
  /* 图片默认上下会加3个像素，下面属性去除3个像素 */
  vertical-align: middle;
}
.navigation-item-group /deep/ .el-drawer__header span {
  font-size: 18px;
  font-weight: 500;
  color: #000;
}

.header {
  height: 100px;
  background-color: #fff;
}

.site-header {
  background-color: #fff;
  width: 1250px;
  height: 100px;
  display: flex;
  margin: 0 auto;
}

.header-logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-logo-img {
  width: 54px;
  height: 54px;
}

.header-search-group {
  flex: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-search-group /deep/ .el-input__inner {
  height: 50px;
  border-radius: 5px 0 0 5px;
}
.header-input {
  width: 550px;
}
.header-button {
  height: 50px;
  border-left: 0;
  border-radius: 0 5px 5px 0;
}

.cart-items {
  min-height: 100px;
  max-height: 500px;
}
.cart-items-scrollbar {
  height: 450px;
}
.cart-items /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.items-list {
  position: relative;
  height: 44px;
  margin: 10px 0;
  padding: 18px 18px 18px 90px;
  line-height: 16px;
  color: #333;
}
.figure {
  position: absolute;
  left: 0;
  top: 0;
}
.items-list .price {
  margin: 5px 0;
}
.cart-bill-detail {
  height: 40px;
  display: flex;
}
.total-price {
  margin-right: 40px;
  font-size: 18px;
  color: red;
}
.total-price span {
  font-size: 12px;
  color: #333;
}
</style>